<template>
	<view class="yzm-btn" v-if="isTime">
		<uni-countdown color="#FF3B1E" :second="60" :font-size="12" :showDay="false" :showHour="false" :showMinute="false" @timeup="timeup"/>
		<text> s后重新获取 </text>
	</view>
	<view class="yzm-btn" @tap="getYzm" v-else> 发送验证码 </view>
</template>

<script setup>
	import { ref } from 'vue';
	import { isValidPhone } from '@/utils/valdate.js'
	const props = defineProps(['mobile'])
	const emit = defineEmits(['getYzm'])
	const isTime = ref(false)
	const getYzm = () => {
		console.log(props.mobile);
		if(props.mobile == '') return getApp().globalData.toast('手机号不能为空')
		if(!isValidPhone(props.mobile)) return getApp().globalData.toast('请输入正确的手机号')
		isTime.value = true
		emit('getYzm')
	}
	const timeup = () => {
		isTime.value = false
	}
</script>

<style lang="scss" scoped>
	.yzm-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 28px;
		color: #FF3B1E;
		font-size: 12px;
		font-weight: 400;
		line-height: 28px;
		text-align: center;
		background: #FFFFFF;
		border-radius: 38px;
		padding: 0 12px;
		border: 1px solid #FF3B1E;
		box-sizing: border-box;
    white-space: nowrap;
	}
</style>